<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title></title>
<link rel="stylesheet" href="http://tablesorter.com/docs/css/jq.css"
	type="text/css" media="print, projection, screen" />
<link rel="stylesheet"
	href="http://tablesorter.com/themes/blue/style.css" type="text/css"
	media="print, projection, screen" />
<script type="text/javascript"
	src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript"
	src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script type="text/javascript"
	src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript"
	src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script>
<script type="text/javascript"
	src="http://tablesorter.com/docs/js/docs.js"></script>
<script type="text/javascript">
	$(function() {
		$("table").tablesorter({
			widthFixed : true,
			widgets : [ 'zebra' ]
		}).tablesorterPager({
			container : $("#pager")
		});
	});
	
// 	$(function(){
// 		$(".supp").click(function(){
// 			var isActive = $(this).find("td:eq(5)").text();
// 			//alert(isActive);
// 			if(isActive == 'No'){
// 				alert('No');
// 				//var result = window.confirm('Do you want to make this Supporting Materials active?');
// 				/* if(result == true){
// 					alert('OK');
// 				} */
// 			}
// 			else{
// 				alert('Yes');
// 			}
			
// 		});
// 	});

	$(function(){
		$('#chkActiveFilter').click(function(){
			if(this.checked){
					//alert('A');
					$('.suppfalse').show();
			}
			else{
				//alert('B');
				$('.suppfalse').hide();
			}
		});
	});
	
	
	function myFunction(x,y) {
	    if(y=='false'){
	    	var v = window.confirm('Do you want to make this Supporting Materials active?');
	    	if(v == true){
	    		//alert('OK');
	    		//;
	    		//alert("activeSupportingMaterial/"+x);
	    		window.location.href="activeSupportingMaterial/" + x;
	    	}
	    	else{
	    		
	    	}
	    }
	}
</script>
<style>
#action{
		margin-right: 10px;
		float: right;
}
</style>
</head>
<body>
	<div id="main">

<div>
<h1>Currents List of Supporting Materials </h1>
<div id="action">
<input value="Create" type="button" onclick="location.href='addSupportingMaterial';"/>
<input id="chkActiveFilter" type="checkbox" />Include In-active
</div>

</div>
		
		<table cellspacing="1" class="tablesorter">
			<thead>
				<tr>
					<th>URL</th>
					<th>Description</th>
					<th>Type</th>
					<th>Added By</th>
					<th>Added Date</th>
					<th>Active</th>
				</tr>
			</thead>
			<!-- <tfoot>
		<tr>
			<th>URL</th>
			<th>Description</th>
			<th>Type</th>
			<th>Added By</th>
			<th>Added Date</th>
			<th>Active</th>
		</tr>
	</tfoot> -->
			<tbody>
				<c:forEach var="supp" items="${list}">
					<tr class="supp${supp.isActive}" onclick="myFunction('${supp.supportingMaterialID}','${supp.isActive}')">
						
						<td class="url"><a href="editSupportingMaterial?suppId=${supp.supportingMaterialID }">${supp.URL}</a></td>
						<td>${supp.description}</td>
						<td>${supp.type}</td>
						<td>${supp.user.account}</td>
						<td>${supp.addedDate}</td>
						<td>
							<c:choose>
								<c:when test="${supp.isActive}">Yes</c:when>
								<c:otherwise>No</c:otherwise>
							</c:choose>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<div id="pager" class="pager">
			<form>
				<img src="http://tablesorter.com/addons/pager/icons/first.png"
					class="first" /> <img
					src="http://tablesorter.com/addons/pager/icons/prev.png"
					class="prev" /> <input type="text" class="pagedisplay" /> <img
					src="http://tablesorter.com/addons/pager/icons/next.png"
					class="next" /> <img
					src="http://tablesorter.com/addons/pager/icons/last.png"
					class="last" /> <select class="pagesize">
					<option selected="selected" value="10">10</option>
					<option value="20">20</option>
					<option value="30">30</option>
					<option value="40">40</option>
				</select>
			</form>
		</div>

	</div>
</body>
</html>